<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Chip - Standalone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>
<body>
  <h2>Text Chips</h2>

  <ion-chip>
    <ion-label>Default</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-label color="secondary">Secondary Label</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-label>Another With Longer Text</ion-label>
  </ion-chip>

  <h2>Color Chips</h2>

  <ion-chip color="primary">
    <ion-icon name="heart" color="dark"></ion-icon>
    <ion-label>Primary</ion-label>
  </ion-chip>

  <ion-chip color="secondary">
    <ion-label color="dark">Secondary w/ Dark label</ion-label>
  </ion-chip>

  <ion-chip color="danger">
    <ion-label>Danger</ion-label>
  </ion-chip>

  <h2>Icon Chips</h2>

  <ion-chip>
    <ion-icon name="pin"></ion-icon>
    <ion-label>Default</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-label>Secondary</ion-label>
    <ion-icon name="pin" color="secondary"></ion-icon>
  </ion-chip>

  <h2>Avatar Chips</h2>

  <ion-chip>
    <ion-avatar>
      <img src="">
    </ion-avatar>
    <ion-label>Default</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-label>Right Avatar</ion-label>
    <ion-avatar>
      <img src="">
    </ion-avatar>
  </ion-chip>

  <h2>Delete Chips</h2>

  <ion-chip id="chip1">
    <ion-label>Default</ion-label>
    <ion-chip-button fill="clear" onclick="del('chip1')" class="my-custom-chip">
      <ion-icon name="close-circle"></ion-icon>
    </ion-chip-button>
  </ion-chip>

  <ion-chip id="chip2">
    <ion-icon name="pin"></ion-icon>
    <ion-label>With Icon</ion-label>
    <ion-chip-button onclick="del('chip2')">
      <ion-icon name="close"></ion-icon>
    </ion-chip-button>
  </ion-chip>

  <ion-chip id="chip3">
    <ion-avatar>
      <img src="">
    </ion-avatar>
    <ion-label>With Avatar</ion-label>
    <ion-chip-button fill="clear" color="dark" onclick="del('chip3')">
      <ion-icon name="close-circle"></ion-icon>
    </ion-chip-button>
  </ion-chip>

  <ion-chip color="primary" id="chip4">
    <ion-icon name="pin"></ion-icon>
    <ion-label>Primary</ion-label>
    <ion-chip-button fill="clear" onclick="del('chip4')">
      <ion-icon name="close-circle"></ion-icon>
    </ion-chip-button>
  </ion-chip>

  <ion-item>
    <ion-label>Chip Item</ion-label>
    <ion-chip slot="end" id="chip5">
      <ion-icon name="pin" color="primary"></ion-icon>
      <ion-label>Default</ion-label>
      <ion-chip-button fill="clear" color="light" onclick="del('chip5')">
        <ion-icon name="close-circle"></ion-icon>
      </ion-chip-button>
    </ion-chip>
  </ion-item>

  <style>
    body {
      margin: 0;
      padding: 16px;
      text-align: center;
    }
  </style>

  <script>
    function del(chip) {
      console.log('called del', chip);
      var delChip = document.getElementById(chip);
      delChip.parentNode.removeChild(delChip);
    }
  </script>
</body>
</html>
